<script setup>
import ssSearch from '@/components/ss-search.vue'
import ssCart from '@/components/ss-cart.vue'
import ssAvatar from '@/components/ss-avatar.vue'
import headerBottomMenuBar from '@/components/header-bottom-menu-bar.vue'
import suspendedContent from '@/components/suspended-content.vue'
import mainLeftSuspendedContentBar from '@/components/main-left-suspended-content-bar.vue'
import mainRightMainContent from '@/components/main-right-main-content.vue'
</script>

<template>
  <div class="app">
    <div class="app-container">
      <!-- 包含头部内容 -->
      <header>
        <div class="header-top">
          <div class="header-search-and-menu">
            <!-- 搜索框 -->
            <ss-search></ss-search>
            <!-- 头部菜单栏 -->
            <header-bottom-menu-bar></header-bottom-menu-bar>
          </div>


          <!-- 购物车 -->
          <ss-cart></ss-cart>

          <!-- 头像 -->
          <ss-avatar></ss-avatar>
          <!-- 占位 -->
          <div class="top-space-right"></div>
        </div>

      </header>

      <!-- 包括主要产品内容及左边的选择 -->
      <main>
        <!-- 左侧悬浮选择条 -->
        <main-left-suspended-content-bar></main-left-suspended-content-bar>
        <!-- 右侧中心区域 -->
        <main-right-main-content></main-right-main-content>
      </main>

      <!-- 右边悬浮内容显示个人资料，在下面的css暂时隐藏了 -->
      <suspended-content class="suspended-content-class">

      </suspended-content>
    </div>

    <!-- 背景版 -->
    <div class="background-container">
    </div>
    <!-- 乳白色透明蒙版 -->
    <div class="mask-container">

    </div>
  </div>
</template>

<style scoped>
.app {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  position: relative;
  background-image: url("@/assets/backgroundImages/bg_1.png");
}

header {
  width: 100vw;
  height: 103px;
  display: flex;
  flex-direction: column;
  background-color: var(--szc-bg-main-green);
  border-radius: 0 0 30px 30px;
}

.header-top {
  width: 100vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 80px;

  >div {
    margin-left: 7%;
  }

}
.header-search-and-menu{
  width: 50%;
  position: relative;
}

.top-space-right {
  display: none;
}

.header-bottom {
  height: 43px;
  width: 100%;
  background-color: var(--szc-bg-main-green);
}

main {
  height: calc(100vh - 103px);
  width: 100vw;
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
}

.background-container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  position: fixed;
  z-index: 11;
  background-image: url("@/assets/backgroundImages/bg_1.png");
}

.app-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 12;
}

.mask-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 10;
}

.suspended-content-class {
  position: fixed;
  right: 0;
  top: 0;
  width: 361px;
  height: 100vh;
  background-color: var(--szc-bg-main-green);
  display: none;
}
</style>